<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>Document</title>

	<style type="text/css">
		#div1{
			width: 1080px;height: 400px;
			background: #ccc;border: 1px solid #000;
			text-align: center;line-height: 400px;
		}
	</style>
</head>
<body>
	<div id="div1">
		请把文件拖拽到此处上传
	</div>
<img id='img1' />


	<script type="text/javascript">
		window.onload=function(){
			let odiv=document.getElementById('div1');
			let oimg=document.getElementById('img1');

			odiv.addEventListener('dragenter',function(){
				odiv.innerHTML='释放鼠标上传';
			},false);
			odiv.addEventListener('dragleave',function(){
				odiv.innerHTML='请把文件拖拽到此处上传';
			},false);
			odiv.addEventListener('dragover',function(ev){
				console.log('dragover');
				ev.preventDefault();

			},false);
			odiv.addEventListener('drop',function(ev){
				odiv.innerHTML='请把文件拖拽到此处上传';
				console.log('drop');
				console.log(ev.dataTransfer.files);
				ev.preventDefault();

				let ofile=ev.dataTransfer.files[0];

				let reader=new FileReader();

				console.log(reader);

				reader.onload=function(){
					// alert(reader.result)
					oimg.src=reader.result
				};
				reader.onerror=function(){

				};

				// reader.readAsText(ofile);
				reader.readAsDataURL(ofile);
				// reader.readAsBinaryString(ofile);
				// reader.readAsArrayBuffer(ofile)
				//error
				//result;
				//readyState
				//onloadstart
				//onabort
				//onerror
				//onload
				//onloadend
				//onloadstart
				//onprogress();
				
				// reader.readAsText();文本
				// readAsArrayBuffer()二进制,每一位是一个字节。、编辑
				// readAsBinaryString();二进制字符串，还能往回转。。上传
				// readAsDataURL()主要是读图片
			},false);







			//ondragenter
			//ondragleave
			//ondragover
			//ondrop.如果dragover不组织默认事件，drop不会法师
			//ev.dataTransfer.files是数组
			//reder=new Filereader();
			//reder.onload();
			//reder.onload();
			//reder.read();
		}


	</script>
</body>
</html>